<template>
  <div class="login">
    <div class="main">
      <div class="content">
        <el-row>
          <!-- <el-col :span="14">
						<img class="login_img" src="https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg" alt="" />
					</el-col> -->
          <el-col class="login_form" :span="10">
            <el-form :model="form" label-width="60px">
              <el-form-item label="用户名">
                <el-input v-model="form.userName" placeholder="请输入用户名" />
              </el-form-item>
              <el-form-item label="密码">
                <el-input
                  v-model="form.passWord"
                  type="password"
                  placeholder="请输入密码"
                  show-password
                />
              </el-form-item>
              <el-form-item class="btn">
                <el-button
                  :disabled="loading"
                  v-loading="loading"
                  type="primary"
                  round
                  @click="onSubmit"
                  >登录</el-button
                >
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";

const router = useRouter();

// do not use same name with ref
const form = ref({
  userName: "admin",
  passWord: "123456",
});

const loading = ref(false);
const onSubmit = () => {
  loading.value = true;
  setTimeout(() => {
    router.push("/");
    sessionStorage.setItem("token", "Bearer 1	234");
    ElMessage({
      type: "success",
      message: "登录成功",
    });
    loading.value = false;
  }, 1000);
};

const bagd = ref("");
const labelColor: any = ref(null);
// 随机颜色
const randomColor = () =>
  `#${Math.random().toString(16).slice(2, 8).padEnd(6, "0")}`;
bagd.value = randomColor();
labelColor.value = bagd.value == "#000000" ? "#FFFFFF" : "#000000";

// setInterval(() => {
// 	str.value = '#'
// 	randomColor()
// }, 10000)
</script>

<style scoped lang="scss">
:deep(.el-loading-mask) {
  background-color: transparent !important;
}
.login {
  width: 100%;
  height: 100%;
  background: v-bind(bagd);
}
:deep(.el-form-item__label) {
  color: v-bind(labelColor);
}
:deep(.el-button.is-round) {
  padding: 8px 50px;
}
.main {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1000px;
  height: 500px;
  border-radius: 100px / 50%;
  // border-radius: 12% 18% 19% 11% / 13% 19% 11% 17%;
  box-sizing: border-box;
  background: transparent;
  box-shadow: inset 15px 10px 40px rgba(158, 158, 158, 0.303),
    10px 10px 20px rgba(117, 117, 117, 0.3),
    15px 15px 30px rgba(72, 70, 70, 0.193),
    inset -10px -10px 20px rgba(233, 229, 229, 0.873);

  &::after {
    position: absolute;
    content: "";
    width: 40px;
    height: 40px;
    background: rgba(254, 254, 254, 0.667);
    left: 80px;
    top: 80px;
    border-radius: 50%;
    animation: move2 6s linear infinite;
    filter: blur(1px);
    z-index: 999;
  }
  &::before {
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    left: 130px;
    top: 70px;
    border-radius: 50%;
    animation: move3 6s linear infinite;
    filter: blur(1px);
    z-index: 999;
  }

  .content {
    width: 100%;
    height: 100%;
    .el-row {
      height: 100%;
      .login_img {
        width: 100%;
        height: 100%;
      }
      .login_form {
        margin: auto;
        padding: 0 50px;
      }
    }
  }

  .btn {
    :deep(.el-form-item__content) {
      justify-content: center;
    }
  }
}

@keyframes move2 {
  25% {
    left: 80px;
    top: 110px;
  }
  50% {
    left: 50px;
    top: 80px;
  }
  75% {
    left: 80px;
    top: 120px;
  }
}

@keyframes move3 {
  25% {
    left: 100px;
    top: 90px;
  }
  50% {
    left: 110px;
    top: 75px;
  }
  75% {
    left: 130px;
    top: 100px;
  }
}
</style>
